<template>
	<view class="container">
		<!-- 商品图片 -->
		<view class="product-image" :style="{'background-image': 'url('+product.image+')'}">
			<view class="product-image-box">
				<image class="product-image-box-img" :src="product.image" mode="aspectFill"></image>
				<view class="product-image-r">
					<view class="product-image-r-title">
						{{ product.title }}
					</view>
					<view class="product-image-r-time">
						{{ product.time }}
					</view>
					<view class="product-image-r-info">
						<text class="product-image-r-info-addr">长沙市</text>
						<text class="product-image-r-info-text">红节奏Livehouse</text>
					</view>
				</view>
			</view>
		</view>
		<view class="container-box">
			<view class="cart-item-left-info">
				<text class="price">1</text>
				<text class="sum">张</text>
			</view>
			<view class="container-box-box">
				<view class="container-box-box-title">
					扫码入场
				</view>
				<view class="container-box-box-text">
					二维码截屏无法核验入场
				</view>
				<view class="container-box-box-code">
					<image class="container-box-box-code-img" src="@/static/img/logo.png" mode="aspectFill"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				NewsList: [{
					title: '人气飙升中'
				}, {
					title: '标记收藏让我更懂你'
				}],
				// 多少人想看的 轮播
				indicatorDots1: false,
				autoplay1: true,
				vertical1: true,
				interval1: 5000,
				duration1: 1000,
				circular1: true,
				product: {
					image: 'https://qcloud.dpfile.com/pc/_22NoSoft3aE6EJvPPVKZl7azJnSbjQvlobQc1TprekID0bsu-SAtCe9N8iBmkY3.jpg', // 商品图片
					title: '[南宁][送机酒保障/酒店权益][强实名/有条件退款]周杰伦2025“嘉年华”世界巡回演唱会', // 商品标题
					price: 99.9, // 商品价格
					specs: ['黑色', '白色', '灰色', '蓝色'], // 商品规格
					shipping: 10, // 运费
					time: '2025.04.12'
				},
			};
		},
		methods: {

		},
	};
</script>

<style lang="less" scoped>
	page {
		width: 100%;
		height: 100%;
		background: #f2f2fa;
		padding: 0 20rpx;
	}
	.container{
		background: #ffffff;
		border-radius: 30rpx;
		overflow: hidden;
		.product-image {
			border-radius: 30rpx 30rpx 0 0;
			width: 100%;
			height: 280rpx;
			overflow: hidden;
			background-position: center center;
			background-size: cover;
			position: relative;
			z-index: 0;
		
			.product-image-box {
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				background-color: rgba(0, 0, 0, 0.6);
				display: flex;
				align-items: flex-start;
				justify-content: space-between;
				padding: 30rpx 25rpx;
				box-sizing: border-box;
		
				.product-image-box-img {
					width: 170rpx;
					height: 220rpx;
					border-radius: 6rpx;
				}
		
				.product-image-r {
					flex: 1;
					margin-left: 30rpx;
					color: white;
		
					.product-image-r-title {
						font-size: 30rpx;
						font-weight: bold;
						height: 150rpx;
					}
		
					.product-image-r-time {
						font-size: 28rpx;
						color: #cac1c4;
					}
					.product-image-r-info {
						display: flex;
						align-items: center;
						color: #cac1c4;
						font-size: 28rpx;
						.product-image-r-info-addr {
							padding-right: 10rpx;
							margin-right: 10rpx;
							border-right: 1rpx solid #cac1c4;
							height:14rpx;
							line-height: 14rpx;
						}
						.product-image-r-info-text{
							
						}
					}
				}
			}
		}
		.container-box {
			box-sizing: border-box;
			padding: 25rpx 35rpx;
			.cart-item-left-info {
				display: flex;
				align-items: center;
					font-size: 28rpx;
				.price {
					padding-right: 10rpx;
					font-size: 32rpx;
					color: #ed171f;
				}
				.sum{
				color: #333333;
					
				}
			}
			.container-box-box{
				margin-top: 45rpx;
				text-align: center;
				.container-box-box-title{
					font-size: 32rpx;
					font-weight:bold;
				}
				.container-box-box-text{
					margin-top:24rpx;
					font-size: 22rpx;
					color: #9a9a9a;
				}
				.container-box-box-code{
					margin: 35rpx auto 0;
					width: 400rpx;
					height: 400rpx;
					padding: 25rpx;
					box-sizing: border-box;
					border: 10rpx solid #eeeeee;
					border-bottom:10rpx solid linear-gradient(to right,green,red,yellow);
					border-radius: 6rpx;
					box-sizing: border-box;
					.container-box-box-code-img{
						width: 100%;
						height:100%;
					}
				}
			}
		}
	}
	
	

	
</style>